<template>
  <view class="TaskCell">
    <view
      v-for="(item, index) in list"
      :key="index"
      @click="rowClick(item)"
    >
      <template v-if="!item.isHide">
        <view
          :class="taskcellItemClass(index, item)"
        >

          <!-- 项目名称 -->
          <view v-if="item.groupTitle" class="cell-grouptitle">
            <span>{{ item.groupTitle }} </span>
            <span v-if="lookForDetail && item.groupTitle!==&quot;图片预览&quot;" style="color:blue;position: absolute;right: 12px;" @click="goto()">查看详情</span>
          </view>
          <view v-else class="cell-container">
            <template v-if="item.contentType === 1">
              <image :src="item.img" class="cell-icon-left" />
              <view :class="`cell-title`">
                <view class="cell-label">
                  <view>{{ item.label }}</view>
                  <view>{{ item.value }}</view>
                  <template v-if="item.usersInfo && item.usersInfo.length">
                    <view
                      v-for="(user, i) in item.usersInfo.filter((item, j) => j < 5)"
                      :key="i"
                      :style="`--i:${item.usersInfo.length - i};`"
                      class="cell-userinfo"
                    >
                      <u-avatar class="cell-userinfo-avator" size="75" :src="user.avatar" />
                    </view>
                    <view v-if="item.usersInfo.length > 4" class="cell-userinfo-avator-rest">...</view>
                  </template>
                </view>
                <view v-if="item.showRightIcon || item.rightFont" class="cell-icon-right">
                  <view class="cell-icon-right-font">
                    <template v-if="item.rightFont">
                      <view v-if="item.showRightFontBadge">
                        <u-badge class="cell-icon-right-badge" type="error" :count="item.rightFont" />
                      </view>
                      <view v-else>
                        {{ item.rightFont }}
                      </view>
                    </template>
                    <!-- {{ item.rightFont }} -->
                    <!-- <u-badge type="error" :count="item.rightFont" /> -->
                  </view>
                  <u-icon v-if="item.showRightIcon" name="arrow-right" color="#B6B9BF" />

                </view>
                <!-- 备注 -->
                <view v-if="item.fontContent" class="cell-content">
                  {{ item.fontContent }}
                </view>
                <!-- 附件 -->
                <view v-if="item.fileContent" class="cell-content cell-file-content">
                  <Task-Files :loading="item.isLoading" :files="item.fileContent" @fileClick="fileClick" />
                </view>
              </view>
            </template>

            <!-- 用户卡片聊天消息 -->
            <view v-else-if="item.contentType === 2" class="taskcell-usercard">
              <view class="taskcell-usercard-content">
                <u-avatar v-if="!item.cardMsg.hideAvatar" size="75" :src="item.cardMsg.avatar" />
                <view class="taskcell-usercard-usermsg-container">
                  <!-- 姓名  时间 -->
                  <view class="taskcell-usercard-usermsg-head">
                    <view>{{ item.cardMsg.name }}</view>
                    <view>{{ item.cardMsg.time }}</view>
                  </view>
                  <!-- 内容 -->
                  <view class="taskcell-usercard-usermsg-content">
                    <view class="askcell-usercard-usermsg-msg">
                      {{ item.cardMsg.content }}
                    </view>
                    <view
                      v-if="item.cardMsg.photolist && item.cardMsg.photolist.length"
                      v-viewer="{movable: false}"
                      class="askcell-usercard-usermsg-photocontent"
                      :style="{
                        '--num': rowPicNum
                      }"
                    >
                      <view
                        v-for="(photo, pindex) in item.cardMsg.photolist"
                        :key="pindex"
                      >
                        <template v-if="isVideo(photo.img)">
                          <view :style="{height: picHeight}" class="video-content">
                            <u-icon
                              color="#fff"
                              name="play-right"
                              size="36"
                              @click="videoView(photo)"
                            />
                          </view>
                        </template>
                        <template v-else>
                          <u-image
                            :height="picHeight"
                            :src="photo.img"
                            border-radius="6"
                          />
                        </template>

                      </view>

                    </view>
                    <view v-if="!item.cardMsg.isHideBackWord" class="askcell-usercard-usermsg-back">
                      <view class="askcell-usercard-usermsg-back-btn" @click="$emit('recallComment', {item, index})">撤回</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>

    <view v-if="showNoMessage && list.length <= showNoMessage" class="cell-tmpty">
      <view>
        暂无数据
      </view>
    </view>
  </view>
</template>

<script type="text/ecmascript-6">
import TaskFiles from 'pages/TaskDetail/components/taskInfo/components/TaskFiles';

/**
  hideFirstItemBorderLine  是否隐藏第一行的下面的线 (true)
  showNoMessage  长度为showNoMessage时候显示数据为空(number)
  isHide 隐藏当前行(true)

  list
      groupTitle 头部 (其他属性忽略)
      action 行点击事件
      contentType 1显示cell 2则显示用户聊天卡片
        contentType: 1
            content 第二行内容
            label 左侧标题
            value 左侧标题对应的值
            rightFont 右侧文字
            showRightFontBadge // boolean 徽章显示 rightFont
            fileContent 文件列表
            usersInfo 用户头像列表
            showRightIcon 显示右侧icon
        contentType 2
            cardMsg: {
              isHideBackWord  // 是否隐藏撤回按钮
              time
              name
              avatar
              content 留言
              photolist: [ { img } ]
            }
**/
export default {
  components: {
    TaskFiles
  },
  props: {
    showNoMessage: {
      type: Number,
      default: 0
    },

    lookForDetail: {
      type: Boolean,
      default: false
    },

    list: {
      type: Array,
      default: () => []
    },

    hideFirstItemBorderLine: {
      type: Boolean,
      default: false
    },

    // 评论内一行展示多少个
    rowPicNum: {
      type: Number,
      default: 4
    },

    // 评论内图片高度
    picHeight: {
      type: String,
      default: '70px'
    }
  },

  methods: {
    goto() {
      const query = {
        filter: `PROGRAMCODE2,${this.$route.query.PROGRAMCODE2}`,
        token: 1,
        data: 'tableId,588',
        menuId: 1624435828446
      };
      const param = {
        path: '/formView',
        query
      };
      this.$router.push(param);
    },

    taskcellItemClass(index, item) {
      const {
        list,
        hideFirstItemBorderLine
      } = this;

      return `
      taskcell-item
        ${
  index !== list.length - 1 &&
  index !== 0 &&
  'taskcell-item-underline'
}
        ${item.showRightIcon && 'taskcell-item-active'}
        ${hideFirstItemBorderLine && 'taskcell-item-hideFirstItemBorderLine'}
      `;
    },

    // 预览视频
    videoView(file) {
      this.$emit('videoView', file);
    },

    // 图片还是视频
    isVideo(path) {
      const arr = path.split('.');
      const item = arr[arr.length - 1];
      const flag = ['mp4', 'MOV'].includes(item);
      return flag;
    },

    getImgs(imgs) {
      return imgs.map(img => img.img);
    },

    fileClick(file) {
      console.log(file);
    },

    rowClick(row) {
      row.action && row.action(row, this);
    }
  }
};
</script>

<style lang="scss" scoped>
  .TaskCell {
    .taskcell-item {
      position: relative;
      background-color: #fff;
      min-height: 50px;
      display: flex;
      align-items: center;
      padding: 10px 12px;
      &.taskcell-item-underline {
        &:after {
          content: '';
          display: block;
          position: absolute;
          left: 40px;
          right: 0;
          height: 1px;
          bottom: 0;
          background-color: #eaecf0;
        }
        // border-bottom: 1px solid #eaecf0;
      }
      .cell-container {
        display: grid;
        align-items: flex-start;
        grid-template-columns: 30px 1fr;
        .cell-icon-left {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }

        .cell-title {
          display: flex;
          align-items: flex-start;
          flex-direction: column;
          .cell-label {
            display: flex;
            margin-right: 30px;
            > view {
              &:first-child {
                color: #343537;
                min-width: 50px;
                white-space: nowrap;
              }
              &:nth-child(2) {
                flex: 1;
                color: #606266;
              }
            }

            .cell-userinfo {
              margin-left: 10px;
              position: relative;
              height: 40px;
              margin-right: 20px;
              .cell-userinfo-avator {
                position: absolute;
                z-index: var(--i);
              }
            }

            .cell-userinfo-avator-rest {
              margin-left: 20px;
              display:flex;
              line-height: 20px;
              color: #b6b9bf;
              align-items:flex-end;
            }
          }

          .cell-icon-right {
              position: absolute;
              right: 10px;
              top: 50%;
              transform: translate(0, -50%);
              display: flex;
              color: #b6b9bf;
              .cell-icon-right-font {
                // line-height: 20px;
                display: flex;
                align-items: center;
                height: 35px;
                .cell-icon-right-badge {
                  position: relative;
                  width: 30px;
                  height: 17px;
                  right: 300px;
                  margin-right: 10px;
                  background-color: #FF654D;
                }
              }
          }
        }

      }
      .cell-content {
          display: grid;
          padding: 9px 0;
      }

      .cell-file-content {
        min-height: 40px;
        padding: 10px 12px;
        margin-top: 10px;
        width: calc(100vw - 60px);
        background: #f5f7fa;
        border-radius: 8px;
      }

      .cell-grouptitle {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        padding-right: 30px;

        font-size: 17px;
        font-weight: 600;
        color: #303133;
      }

    }

    .taskcell-item-hideFirstItemBorderLine {
      &:first-child {
        border-bottom: none;
      }
    }

    .taskcell-item-active {
       -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
        -moz-user-select: none;
        user-select:none;
        -webkit-touch-callout:none;

        -webkit-user-select:none;

        -khtml-user-select:none;

        -moz-user-select:none;

        -ms-user-select:none;

        user-select:none;

        -o-user-select:none;
        transition: linear .3s;
      &:active {
        background-color: #F5F7FA;
      }
    }

    .taskcell-usercard {
      display: grid;
      width: calc(100vw - 24px);
      font-size: 14px;

      .taskcell-usercard-content {
        display: flex;

        .taskcell-usercard-usermsg-container {
          flex: 1;
          padding-left: 8px;

          .taskcell-usercard-usermsg-head {
            color: #b6b9bf;
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
          }

          .taskcell-usercard-usermsg-content {
            margin-top: 16px;
            .askcell-usercard-usermsg-msg {
              margin-bottom: 12px;
              word-break: break-all;
            }

            .askcell-usercard-usermsg-photocontent {
              display: grid;
              gap: 10px;
              grid-template-columns: repeat(var(--num), minmax(60px, 1fr));

              .video-content {
                background-color: #BFC4CC;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }

            .askcell-usercard-usermsg-back {
              padding-top: 8px;
              display: flex;
              flex-direction: row-reverse;
              .askcell-usercard-usermsg-back-btn {
                color: #2979FF;
              }
            }
          }
        }
      }
    }
  }

.cell-tmpty {
  background-color: #fff;
  height: 120px;
  color: #BBBEC4;
  > view {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.video-view-content {
  width: 100%;
  height: 100%;
  background-color: black;
  .playerClose {
    text-align: right;
    padding: 5px;
    .close-icon {
      transform: rotate(45deg);
    }
  }

  .videoboxshowTaskCells {
    width: 100%;
    height: calc(100% - 35px);
  }

}

</style>
